.checkbox(@color: @checkbox-color) {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid @border-color-base;
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
  
  &:after {
    content: '';
    display: table;
    width: 4px;
    height: 8px;
    position: absolute;
    top: 1px;
    left: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(0);
    .transition();
  }
  &:hover {
    border-color: @color;
  }
  .checkbox-disabled()
}

.checkbox-active(@color: @checkbox-color) {
  .checkbox(@color);
  border-color: @color;
  background-color: @color;

  &:after {
    transform: rotate(45deg) scale(1);
    .transition();
  }
}

.checkbox-half(@color: @checkbox-color) {
  .checkbox(@color);
  border-color: @color;
  background-color: @color;

  &:after {
    width: 8px;
    height: 1px;
    transform: scale(1);
    left: 2px;
    top: 5px;
  }
}

.checkbox-disabled() {
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    background-color: @input-disabled-bg;
    border-color: @border-color-base;
    cursor: not-allowed;

    &:after {
      animation-name: none;
      border-color: #ccc;
    }
  }
}

.checkbox-disabled-after() {
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:after {
      background-color: #ccc;
    }
  }
}

.checkbox-active-outline(@color: @checkbox-color) {
  .checkbox(@color);

  &:after {
    transform: rotate(36deg) scale(1);
    .transition();
    border-color: @color;
    width: 6px;
    height: 10px;
    top: 0px;
    left: 3px;
  }
}

.checkbox-half-outline(@color: @checkbox-color) {
  .checkbox(@color);

  &:after {
    width: 8px;
    height: 1px;
    transform: scale(1);
    left: 2px;
    top: 5px;
    border-color: @color;
  }
}



.radio(@color: @radio-color) {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid @border-color-base;
  border-radius: 50%;
  .transition();
  cursor: pointer;

  &:after {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    top: 2px;
    border-radius: @border-radius-base;
    display: table;
    border-top: 0;
    border-left: 0;
    content: ' ';
    background-color: @color;
    .opacity(0);
    .transition();
    transform: scale(0);
  }
  &:hover {
    border-color: @color;
  }
  .checkbox-disabled()
}

.radio-active(@color: @radio-color) {
  .radio(@color);
  border-color: @color;
  &:after {
    .opacity(1);
    transform: scale(1);
    .transition();
  }
  .checkbox-disabled-after()
}